<template>
  <div>
    <el-card>
      <div class="noptice-header flex items-center justify-between">
        <el-button type="primary" size="small" @click="createClick"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="getData">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableList">
        <el-table-column prop="name" label="会员等级"></el-table-column>
        <el-table-column prop="discount" label="折扣率(%)"></el-table-column>
        <el-table-column prop="level" label="等级序号"></el-table-column>
        <el-table-column
          prop="create_time"
          label="发布时间"
          width="280"
        ></el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              @change="statusChange(row)"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              text
              type="primary"
              size="small"
              @click="editNoticeClick(scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              title="是否要删除该公告？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button text type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加公告' : '修改公告'"
      @submit="submit"
    >
      <el-form
        ref="formRef"
        :model="fromData"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="等级名称" prop="name">
          <el-input v-model="fromData.name" placeholder="请输入等级名称" />
        </el-form-item>
        <el-form-item label="等级权重" prop="level">
          <el-input
            v-model="fromData.level"
            type="Number"
            placeholder="请输入等级权重"
          />
        </el-form-item>
        <el-form-item label="是否启用" prop="">
          <el-switch
            v-model="fromData.status"
            @change="statusChange(row)"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="升级条件" prop="">
          <el-input v-model="fromData.max_price" placeholder="">
            <template #prepend>累加消费</template>
            <template #append>元</template>
          </el-input>
          <span class="text-xs text-gray-400 my-2"
            >设置会员等级所需要的累计消费必须大于等于0,单位：元</span
          >
          <el-input v-model="fromData.max_times" placeholder="">
            <template #prepend>累计次数满</template>
            <template #append>次</template>
          </el-input>
          <span class="text-xs text-light-100 text-gray-400 my-2"
            >设置会员等级所需要的累计消费必须大于等于0,单位：元</span
          >
        </el-form-item>
        <el-form-item label="升级条件" prop="">
          <el-input v-model="fromData.discount" type="Number">
            <template #append>%</template>
          </el-input>
          <span class="text-xs text-gray-400 my-2"
            >折扣率单位为百分比，如输入90，表示该会员等级的用户可以以商品原价的90%购买</span
          >
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import Drawer from "@/components/Drawer/index.vue";
import {
  getUserLevelList,
  addUserLevel,
  editUserLevel,
  delUserLevel,
  changStatus,
} from "@/api/level";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";
const {
  tableList,
  page,
  total,
  limit,
  getData,
  changePage,
  handleDelete,
  statusChange,
} = useInitTable({
  getList: getUserLevelList,
  status: changStatus,
  del: delUserLevel,
});

const {
  fromData,
  title,
  formRef,
  rules,
  DrawerRef,
  createClick,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    name: "",
    level: 100,
    status: 1,
    discount: 10,
    max_price: 1000, // 累计消费金额
    max_times: 500, // 累计消费次数
  },
  create: addUserLevel,
  updata: editUserLevel,
  getData: getData,
  rules: {},
});
</script>
